/**
 * 课程卡片组件
 */

'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { ProcessedCourse } from '../../types/course';
import { getTextColor } from '../../utils/colorUtils';
import { getCourseDisplayText } from '../../utils/scheduleUtils';
import { clsx } from 'clsx';

export interface CourseCardProps {
  /** 课程信息 */
  course: ProcessedCourse;
  /** 点击事件 */
  onClick: (course: ProcessedCourse) => void;
  /** 动画延迟时间 (ms) */
  animationDelay: number;
  /** 自定义类名 */
  className?: string;
}

export const CourseCard: React.FC<CourseCardProps> = ({
  course,
  onClick,
  animationDelay,
  className
}) => {
  const displayText = getCourseDisplayText(course);
  const textColor = getTextColor(course.color);
  
  const cardStyle = {
    backgroundColor: course.color,
    color: textColor,
    gridRow: `${course.gridPosition.row} / span ${course.gridPosition.rowSpan}`,
    gridColumn: course.gridPosition.column
  };

  return (
    <motion.div
      className="h-full rounded-lg overflow-hidden"
      style={cardStyle}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: animationDelay / 1000, ease: 'easeOut' }}
      whileHover={{ scale: 1.05, zIndex: 10 }}
      whileTap={{ scale: 0.98 }}
      onClick={() => onClick(course)}
    >
      <div
        className={clsx(
          'course-card relative p-2 cursor-pointer h-full',
          'flex flex-col justify-center text-center min-h-[60px]',
          className
        )}
      >
        <div className="course-name font-semibold text-sm leading-tight mb-1">
          {displayText.name}
        </div>
        <div className="course-location text-xs opacity-90 mt-3">
          {displayText.location}
        </div>
      </div>
    </motion.div>
  );
};
